<template>
	<view class="common_card">
		<text class="common-bold-title">{{projectInfo.itemName}}</text>
		<view class="location">
			<image style="width: 21rpx;height: 28rpx;" src="/static/home/location.png" mode="aspectFit"></image>
			<text class="locationText">{{projectInfo.location}}</text>
		</view>
		
		<view class="onlineStatus_content">
			<view class="onlineStatus_item_bkg" :class="index == 0 ? 'bkg_color_blue' : ((index == 1) ? 'bkg_color_green' : 'bkg_color_red')" v-for="(item, index) in deviceOnlineStatusList" :key="index">
				<view class="onlineStatus_item">
					<text class="item_key" :class="index == 0 ? 'bkg_color_blue' : ((index == 1) ? 'bkg_color_green' : 'bkg_color_red')">{{item.total}}</text>
					<text class="item_value">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view  class="startDateView">
			<image src="/static/home/cala.png" mode="aspectFit" style="width: 26rpx;height: 28rpx;margin-right: 8rpx;"></image>
			<text class="startDateView-text">{{projectStartDate}}</text>
		</view>
		<view class="grid-row">
			<view class="grid-col">
				<image src="/static/home/user.png" mode="aspectFit" style="width: 26rpx;height: 28rpx;margin-right: 8rpx;"></image>
				<text class="startDateView-text" style="margin-top: -4rpx;">{{projectManager}}</text>
			</view>
			<view class="grid-col phone">
				<image src="/static/home/phone.png" mode="aspectFit" style="width: 26rpx;height: 28rpx;margin-right: 8rpx;margin-top: 3rpx;"></image>
				<text class="startDateView-text" style="margin-top: -4rpx;">联系电话：</text>
				<!-- <view> -->
					<text class="startDateView-text" style="margin-top: -4rpx;text-decoration: underline;cursor: pointer;" @click.stop="callPhone">{{projectInfo.projectManagerTel}}</text>
				<!-- </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'cs-project-info',
		props:{
			projectInfo:{
				type:Object,
				default:{}
			}
		},
		data(){
			return {
				
			}
		},
		computed:{
			deviceOnlineStatusList(){
				var list = [{
					name:'总设备',
					total:this.projectInfo.totalDev,
				},{
					name:'在线',
					total:this.projectInfo.online,
				},{
					name:'离线',
					total:this.projectInfo.offline,
				}];
				return list;
			},
			projectStartDate(){
				return "项目开始时间：" + this.projectInfo.projectDate;
			},
			projectManager(){
				return "项目经理：" + this.projectInfo.projectManager;
			},
		},
		methods:{
			callPhone(){
				let self = this;
				uni.showActionSheet({
					itemList:[self.projectInfo.projectManagerTel],
					title:'拨打电话',
					success: (res) => {
						uni.makePhoneCall({
							phoneNumber:self.projectInfo.projectManagerTel
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.common_card{
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		padding: 32rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}
	.common-bold-title{
		font-size: 36rpx;
		font-weight: 500;
		line-height: 56rpx;
		letter-spacing: normal;
		color: #000000;
		line-height: 56rpx;
	}
	.location{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}
	.locationText{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;
		margin-left: 14rpx;
	}
	
	.startDateView{
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		height: 40rpx;
	}
	.startDateView-text{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.grid-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 24rpx;
	}
	
	.grid-col {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	.onlineStatus_content{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		column-gap: 12rpx;
	}
	.onlineStatus_item_bkg{
		border-radius: 24rpx;
		background: #EFF6FF;
		padding: 24rpx;
		width: 144rpx ;
		flex: 1;
	}
	.bkg_color_red{
		background-color: #FEF2F2;
		color: $power-color-error;
	}
	.bkg_color_green{
		background-color: #F0FDF4;
		color: $power-color-ok;
	}
	.bkg_color_blue{
		background-color: #EFF6FF;
		color: $power-color-primary;
	}
	.onlineStatus_item{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.item_key{
		font-family: Roboto;
		font-size: 40rpx;
		font-weight: 600;
		line-height: 56rpx;
		min-height: 56rpx;
		letter-spacing: normal;
		display: block;
	}
	.item_value{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;;
	}
	

</style>